const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');		//html插件
const CssExtractPlugin = require('mini-css-extract-plugin');	//css分离
const CleanWebpackPlugin = require("clean-webpack-plugin");		//清除多余打包文件
//const CopyWebpackPlugin = require("copy-webpack-plugin");		//拷贝文件
//const Webpack = require('webpack');

/* 输出配置文件 */	
module.exports = {
	
	/* 入口文件 */
	entry: {	
		main:__dirname+"/src/js/main.js", 
		other:__dirname+"/src/js/other.js",
	},
	
	/* 模块和loader */
	module:{
		noParse:/jquery/,	//不去解析引用库中的依赖关系，如果引入的库很大，会提示很多效率
		
		//loader
		rules:[
			
			/* 字体文件loader */
			{
                test: /\.(woff|woff2|svg|eot|ttf)$/i,
                use: 'url-loader?prefix=font&name=font/[name].[ext]'
            },
			
			/* 图片 Loader 放到规则的最前面（自下而上的执行顺序） */
			{
			    test: /\.(jpg|jpeg|svg|png|gif)$/i,	//i忽略大小写
				include:path.resolve(__dirname,'src/img'),	//限定只处理img目录
				use:"url-loader?limit=3072&name=img/[name].[hash:8].[ext]",	//使用query方式简写配置项
			    /* use:{
					loader:'url-loader',
					options:{
						limit:3*1024,			//图片小于3k时就转换为base64格式
						outputPath:'img/',		//图片默认打包到img目录下
						name:'[name].[hash:8].[ext]'	//图片生成的文件名
						publicPath:'',	//资源文件引用目录:在上线时可以替换CDN或数据盘路径，用于存储静态文件如img/js/css
						//在这里使用publicPath的话，只给图片加引用路径，其他资源不会加，这里用了，在output中不要用
					}
				} */
			},
			
			/* html Loader */
			{
			    test: /\.html$/,
			    use: [
					"html-withimg-loader",	//实现html中的img标签引用的图片打包
					'underscore-template-loader',	//html使用@require('url..')实现模块化调用
				]
			},
			
			/* JS Loader ES6解析*/
			{
				test: /(\.jsx|\.js)$/,
                use: {
					loader:'babel-loader',
					options:{
						presets:[
							'@babel/preset-env'
						],
						plugins: [	//处理一些提案中的高级语法
							//["@babel/plugin-proposal-decorators", { "legacy": true }],
							//["@babel/plugin-proposal-class-properties", { "loose" : true }],
							"@babel/plugin-transform-runtime",
							"@babel/plugin-syntax-dynamic-import"	//懒加载实现插件
						],
					}
				},	 
				include:path.resolve(__dirname,'src/js'),	//限定只处理js目录
                //exclude: /node_modules/  	//排除查询模块库的js
			},
			
			/* CSS Loader */ 
			{
				test:/\.css$/,
				use: [
					{
						loader: CssExtractPlugin.loader,
						options: {
							publicPath: '../',	//避免图片路径出错
						}
					},
	                { 
	                	loader: 'css-loader', 
	                },
	                {
	                	loader:"postcss-loader",
	                	options: {
	                        plugins: [
						        require('autoprefixer')
	                        ]
                    	}
	                }
                ]
			},
			
			/* SASS Loader */
			{
                test: /(\.scss|\.sass)$/,
				include:path.resolve(__dirname,'src/css'),
                use: [
	                {
	                	loader: CssExtractPlugin.loader,
	                	options: {
							publicPath: '../'
	                	}
	                },
	                'css-loader',
	                {
	                	loader:"postcss-loader",
	                	options: {	
	                        plugins: [
						        require('autoprefixer')
	                        ]
                    	}
	                },
	                "sass-loader"
                ]
            },
		]
	},
	
	plugins:[
		
		/* index页 */
        new HtmlWebpackPlugin({						
        	template: __dirname + "/src/index.html",
        	filename: "index.html", 
        	favicon: __dirname + "/src/favicon.ico",
        	minify: {
            	removeComments: true,
            	collapseInlineTagWhitespace: true, 		
            	collapseWhitespace:true,
				removeAttributeQuotes:true,
       		},
        	chunks:['main','commons','vender'], 	//需要引用的资源包
        	//excludeChunks:['btn','b'],			//如果资源包过多，可以写需要排除的资源包
        	//inject:"head", 						//指定将js插入到head标签中，默认body
       		data:{	//传参，ejs获取
				title:'智能眼科学会官网'
			},
        }),
		
		/* other页 */
		new HtmlWebpackPlugin({						
			template: __dirname + "/src/other.html",
			filename: "other.html", 				
			favicon: __dirname + "/src/favicon.ico",		
			minify: {									
				removeComments: true, 					
				collapseInlineTagWhitespace: true, 	
				collapseWhitespace:true,			
				removeAttributeQuotes:true,	
			},
			chunks:['other','commons','vender'], 
		}),
		
		/*css文件分离*/
        new CssExtractPlugin({
	      	filename: "css/[name].[hash:8].css",
	      	chunkFilename: "css/[id].css" 
    	}),
		
		/*清除多余打包文件*/
		new CleanWebpackPlugin(),
		
		/* 可以避免打包模块中多余的资源 */
		//new Webpack.IgnorePlugin(/****/,/****/) //第一个参数是需要忽略的资源目录，第二个参数是模块名字，两个参数都应该是正则
		
		/* 拷贝文件 */
 		//new CopyWebpackPlugin([
			//{from:'doc',to:'./doc'}	//将doc目录文件拷到dist/doc下
 		//])
	],		
};